<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <div class="app">
    <h1>我是App组件【祖先组件】</h1>
    <h2>汽车名称：{{ name }}</h2>
    <h2>汽车价格：{{ price }}</h2>
    <hr>
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/components/Child.vue";
import {reactive, toRefs} from "vue";

export default {
  name: 'App',
  components: {
    Child: Child
  },
  setup() {
    // 使用Vue提供的reactive
    let car = reactive({
      name: '奔驰',
      price: '50W'
    })

    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
.app {
  background: #8549da;
  padding: 20px;
}
</style>
